<!-- 龙虎榜 -->
<template>
  <div class="dragonTiger mt15">
    <div>{{title}}</div>
    <div class="table w1021 mt15">
      <div class="tableTh tableTr flex">
        <span class="tableTd w350 high">买入营业部名称</span>
        <span class="tableTd w220 high">买入金额（万元）</span>
        <span class="tableTd w130 high">
          买入金额
          <br />占比（％）
        </span>
        <span class="tableTd w220 high">卖出金额（万元）</span>
        <span class="tableTd w130 high">
          卖出金额
          <br />占比（％）
        </span>
      </div>
      <div class="tableTr tableBody top flex" v-for="(item,index) in buy" :key="index">
        <span class="orange tableTd w350 high">{{item.branchName|filterVal}}</span>
        <span class="orange tableTd w220 high">{{item.buyValue|filterVal("wy")}}</span>
        <span class="orange tableTd w130 high">{{item.buyRate|filterVal("no")}}</span>
        <span class="orange tableTd w220 high">{{item.sellValue|filterVal("wy")}}</span>
        <span class="orange tableTd w130 high">{{item.sellRate|filterVal("no")}}</span>
      </div>
      <div class="tableNone orange w1021 top" v-if="buy.length==0">暂无数据</div>
    </div>
    <div class="txt">
      买入金额合计：{{buyAll.money}}万元
      <span style="margin-right:10px"></span>
      买入金额合计占比：{{buyAll.percentum}}%
    </div>
    <div class="table w1021 mt15">
      <div class="tableTh tableTr flex">
        <span class="tableTd w350 high">卖出营业部名称</span>
        <span class="tableTd w220 high">买入金额（万元）</span>
        <span class="tableTd w130 high">
          买入金额
          <br />占比（％）
        </span>
        <span class="tableTd w220 high">卖出金额（万元）</span>
        <span class="tableTd w130 high">
          卖出金额
          <br />占比（％）
        </span>
      </div>
      <div class="tableTr tableBody top flex" v-for="(item,index) in sell" :key="index">
        <span class="orange tableTd w350 high">{{item.branchName|filterVal}}</span>
        <span class="orange tableTd w220 high">{{item.buyValue|filterVal("wy")}}</span>
        <span class="orange tableTd w130 high">{{item.buyRate|filterVal("no")}}</span>
        <span class="orange tableTd w220 high">{{item.sellValue|filterVal("wy")}}</span>
        <span class="orange tableTd w130 high">{{item.sellRate|filterVal("no")}}</span>
      </div>
      <div class="tableNone orange w1021 top" v-if="sell.length==0">暂无数据</div>
    </div>
    <div class="txt">
      卖出金额合计：{{sellAll.money}}万元
      <span style="margin-right:10px"></span>
      卖出金额合计占比：{{sellAll.percentum}}%
    </div>
  </div>
</template>

<script>
import { numberNo, number } from "../../script/api";
export default {
  data() {
    return {
      buy: [],
      sell: [],
      title: "",
      buyAll: { money: null, percentum: null },
      sellAll: { money: null, percentum: null }
    };
  },
  props: ["data"],
  filters: {
    filterVal(ops, num) {
      if (num == "wy") {
        return number(ops, num, 10000);
      }
      if (num == "no") {
        return numberNo(ops, num);
      }
      return ops ? ops : "--";
    }
  },
  watch: {
    data(ops) {
      this.buy = ops.buy.map(item => {
        this.buyAll["money"] = this.buyAll.money + item.buyValue;
        this.buyAll["percentum"] = this.buyAll.percentum + item.buyRate;
        return item;
      });
      this.sell = ops.sell.map(item => {
        this.sellAll["money"] = this.sellAll.money + item.sellValue;
        this.sellAll["percentum"] = this.sellAll.percentum + item.sellRate;
        return item;
      });
      // 买入
      this.buyAll.money = numberNo(this.buyAll.money, "no", 10000);
      this.buyAll.percentum = numberNo(this.buyAll.percentum, "no");
      // 卖出
      this.sellAll.money = numberNo(this.sellAll.money, "no", 10000);
      this.sellAll.percentum = numberNo(this.sellAll.percentum, "no");

      this.title = this.buy[0]
        ? this.buy[0].endDate + " " + this.buy[0].clsName
        : "";
    }
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>